<template>
	<div class="box"><!--只能有一个根节点-->
		<!--没有设置type默认值为text文本类型-->
		<!--handler ===  @change  value === value -->
		<MiInput placeholder="邮箱/手机号码/小米ID" :value="account" :handler="accountFun"></MiInput>
		<MiInput type="password" placeholder="密码" :value="pwd" :handler="pwdFun"></MiInput>
		<div class="err_tip" v-if="err" v-text="text"></div>
		<!--组件自带的text和handler属性--><!--text等同于v-text--><!--handler等同于@click-->
		<MiButton text="登录" :handler="login"></MiButton><!--handler === @click-->
	</div>
</template>

<script>
    //导入input组件，
    // 自带属性type(默认类型string，如果没有设置这个属性默认值text)，
    // placeholder(使用组件必须有这个属性不然报错)，
    // value，
    // handler(属性是个函数)
    import MiInput from "./MiInput";
    import MiButton from "./MiButton";
    import axios from "axios";
    import http from "../utils/http.js";
    import router from "../router";
    export default {
        components:{ MiInput, MiButton },//注册组件
	    data(){
            return {
                account:"",//默认账号和密码数据
	            pwd:"",
                err:false,
                text:null
            }
	    },
        methods:{
            //事件函数默认传过来一个事件对象event
			accountFun(event){//账号表单内容改变调用
			    this.account = event.target.value;//改变把表单的value存入data中
				if(!this.account){
                    this.err = false;
                    this.text = null;
				}
			},
			pwdFun(event){//密码表单内容改变调用
                this.pwd = event.target.value;
                if(!this.pwd){
                    this.err = false;
                    this.text = null;
                }
			},
	        login(){//点击登录调用这个函数
                if(!this.account && !this.pwd){
                    this.err = true;
                }else{
                    this.err = false;
                    document.cookie="userinfo="+ this.account;//本地写入cookie
                    http.post("/user/passwordLogin",{
                        name: this.account,//把data中的数据用ajax传到express里
                        pwd: this.pwd,
                        userinfo:this.account
                    })
                        .then(result =>{
							if(result){
                                this.err = true;
                                this.text = result;
							}else{
                                this.$store.dispatch("cart/init",this.account);
                                let router = this.$route.query.router;
                                this.$router.replace(""+router);//$router代表改变路由//$route表示获取//从哪里来跳哪里去
							}
                        });
                }
	        }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	*
		outline none
	.box
		padding-top 0.4rem
		.err_tip
			margin 0.3rem auto
			width 85%
			margin-bottom 5px
			line-height 20px
			color #F66
			padding-top 14px
		.button
			margin-top .5rem
</style>